<template>
  <component :is="el" v-model="row[column.prop]" v-bind="getElProps"></component>
</template>

<script setup lang="ts" name="ColumnRender">
import type { Component, PropType } from "vue";
import { unref, computed } from "vue";
import { SchemaProps } from "@/components/Form/type";
import { isFunction } from "@/utils/is";
const props = defineProps({
  el: {
    type: Object as PropType<Component>
  },
  row: {
    type: Object
  },
  column: {
    type: Object
  }
});
const getElProps = computed(() => {
  const elProps = props.column.elProps;
  if (elProps) {
    if (isFunction(elProps.readonly)) {
      elProps.readonly = elProps.readonly(props.row);
    }
    if (isFunction(elProps.disabled)) {
      elProps.disabled = elProps.disabled(unref(props.row));
    } else {
      elProps.disabled = elProps.disabled;
    }
  }
  return elProps as SchemaProps;
});
</script>

<style scoped></style>
